<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQ滚动广告</title>
		<style>
			body,ul,ol{margin: 0; padding: 0;}
			li{list-style: none; float: left;}
			img{width: 570px; height: 270px; vertical-align: top; border: 0;}
			.m-banner{position: relative; width: 570px; height: 270px; overflow: hidden;}
			.m-banner-ct{position: absolute; top: 0; /*left: -460px;*/ height: 270px;}
			.m-banner-btn{position: absolute; right:5px; bottom: 5px;}
			.m-banner-btn li { 
				width: 35px;height: 5px; margin-left: 5px; margin-top: 5px; background-color: #000000; cursor: pointer;
				float: left; -moz-opacity: 0.3; opacity: 0.3; filter: alpha(opacity=30); *zoom: 1;
			}
			.m-banner-btn .z-active
			{height: 10px; background-color: orangered; margin-top: 0; -moz-opacity: 1; opacity: 1; filter: alpha(opacity=100); *zoom: 1;}
		</style>
	</head>
	<body>
		<!-- 广告模块 -->
		<div id="J_Banner" class="m-banner">
			<!-- 广告内容 -->
			<ul class="m-banner-ct">
				<li> <a href="http://www.shiyanlou.com" target="_blank"><img src="static/img/banner/1.jpg" alt=""></a>
	</li>
				<li> <a href="http://www.shiyanlou.com" target="_blank"><img src="static/img/banner/2.jpg" alt=""></a>
	</li>
				<li> <a href="http://www.shiyanlou.com" target="_blank"><img src="static/img/banner/3.jpg" alt=""></a>
	</li>
				<li> <a href="http://www.shiyanlou.com" target="_blank"><img src="static/img/banner/4.jpg" alt=""></a>
	</li>
				<li> <a href="http://www.shiyanlou.com" target="_blank"><img src="static/img/banner/5.jpg" alt=""></a>
	</li>
			</ul>
			<ol id="J_Btn" class="m-banner-btn">
				<li ></li>
				<li ></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>
		
		<script src="static/js/jquery/jquery-1.9.1.min.js"></script>
		<script src="static/js/jquery/my_plugs/jquery.scrollBox.js"></script>
		<script>
			$('#J_Banner').MY_ScrollBox({direction:'x'});
		</script>
	</body>
</html>

